如何输入多个跨度标签替换 function

Question

I have a sentence and I am trying to replace globally one word by an under-line of equal space. That is:

• Example: This is my first text, this is my second text and this is my third text.
• NewExample: This is my first ____, this is my second ____ and this is my third ____.

My question is related with this question How to change color of a word in a sentence by clicking it on PC or by touching it on Android and the excellent answer of @terrymorse. So, I want to use somehow the following in the replace function:

//  span.style.color = 'yellow';
//  span.style.width = span.getBoundingClientRect().width + 'px';
//  span.innerHTML = '_';
//  span.style.borderBottom = '2px solid yellow';

This is my full example but only color works. Could you please someone help me and tell me what I am doing wrong with the rest of them?

<div id='Example'>This is my first text, this is my second text and this is my third text.</div>
<div id='Split'>text</div>
<div id='NewExample'></div>
    
fReplace(Example, Split)

function fReplace(Example, Split) {
    v1 = Example.innerText;
    function myFunction(word) {
        var reg = new RegExp(word, "g");
    
        v1 = v1.replace(reg, `<span style = "color: yellow; word.borderBottom: 2px solid yellow; width: word.getBoundingClientRect().width + 'px'; word.innerHTML: '_'">${word}</span>`)
    }
    Split.forEach(myFunction);
    document.getElementById('NewExample').innerHTML = v1;   
}

Answer 1

You can create a function that replaces the target text with a span element. The span element will be used to display the underline. I created a function named replaceTextWithUnderline in the code snippets below that demonstrates the expected behavior.

I thought of two different approaches to display the underline. Hopefully, one of these approaches fits your use case:

---

Approach 1: Making the text color transparent and wrapping the target text in <span> tags

This approach is straightforward. It involves replacing the target text with the target text wrapped inside of <span> tags.

 function replaceTextWithUnderline(words, targetText = 'text') { const regex = RegExp(targetText, 'gi') const styles = ` color: transparent; border-bottom: 2px solid yellow; ` return words.replace(regex, `<span style="${styles}">${targetText}</span>`) } function fReplace() { const exampleEl = document.getElementById('Example') const newExampleEl = document.getElementById('NewExample') newExampleEl.innerHTML = replaceTextWithUnderline(exampleEl.innerText) } fReplace()

 <div id='Example'>This is my first text, this is my second text and this is my third text.</div> <div id='NewExample'></div>

Positive aspects to this approach are that the underline's width will be equal to the target text's width and that you can achieve the same result using classes and CSS. For example:

<!-- Generated HTML from Javascript -->
<span class="underline">target text</span>

/* Accompanying styles for generated HTML */
.underline {
  color: transparent;
  border-bottom: 2px solid yellow;
}

A negative aspect is that this may not be a solution if you do not want any text inside of the <span> tags.

---

Approach 2: Using ch to define the underline's width

If you do not want any text inside of the <span> tags, you can opt to using the following CSS:

/* To apply a width, we need to change the display from inline to inline-block. */
display: inline-block;

/* <number> represents the number of characters in the target text */
width: <number>ch; 

 function createUnderlineStyles(numberOfChars) { return ` display: inline-block; width: ${numberOfChars}ch; border-bottom: 2px solid yellow; ` } function replaceTextWithUnderline(words, targetText = 'text') { const regex = RegExp(targetText, 'gi') const styles = createUnderlineStyles(targetText.length) return words.replace(regex, `<span style="${styles}"></span>`) } function fReplace() { const exampleEl = document.getElementById('Example') const newExampleEl = document.getElementById('NewExample') newExampleEl.innerHTML = replaceTextWithUnderline(exampleEl.innerText) } fReplace()

 <div id='Example'>This is my first text, this is my second text and this is my third text.</div> <div id='NewExample'></div>

This utilizes the ch unit . From MDN's documentation, the ch unit is:

The advance measure (width) of the glyph "0" of the element's font.

This approach can be used if you do not want any text inside of the <span> tags. However, downsides to this approach are that the underline's width will not exactly match the target text's width and you will most likely not be able to implement this with CSS due to the nature of the number of characters being dynamic.