Underline Specific Text

 Underline specific text within a <p> tag using JavaScript

To bold and underline specific text within a <p> tag using JavaScript, you can wrap those specific words in <span> tags with inline styles or classes for styling. Here's an example:

HTML Structure

html
<p id="content">
    Love and Marriage, Finances, Cautions, Health, Physical Appearance, Husbands, Ideal Match, Domestic Environments, Professions, Lucky days, Number and Colour
</p>

JavaScript

javascript
document.addEventListener("DOMContentLoaded", function() {
    const contentElement = document.getElementById("content");

    // The words/phrases to bold and underline
    const phrasesToStyle = [
        "Love and Marriage", "Finances", "Cautions", "Health", 
        "Physical Appearance", "Husbands", "Ideal Match", 
        "Domestic Environments", "Professions", 
        "Lucky days", "Number and Colour"
    ];

    // Get the original content
    let content = contentElement.innerHTML;

    // Replace each phrase with a styled version
    phrasesToStyle.forEach(phrase => {
        const styledPhrase = `<span style="font-weight: bold; text-decoration: underline;">${phrase}</span>`;
        content = content.replace(phrase, styledPhrase);
    });

    // Update the content
    contentElement.innerHTML = content;
});

Explanation

1. Identify the Phrases: The phrasesToStyle array contains the phrases to be bolded and underlined.
2. Retrieve the Content: The original text of the <p> tag is retrieved using innerHTML.
3. Replace Each Phrase: Use replace() to wrap each phrase with a <span> tag and apply inline styles for bold and underline.
4. Update the Content: Set the updated innerHTML back to the <p> tag.

Output

The specified words in the paragraph will appear bold and underlined, like this: Love and Marriage, Finances, Cautions, etc. The text-decoration property is used to specify whether the text should be Underline, overline, line-through, or blink. Underline and overline decorations are positioned under the text, while line-through is placed above it.