仅在特定字符周围添加样式标记

Question

我试图只在段落元素中添加内联样式。 例如：

<p>This paragraph has the numbers 1 and 2 in it.</p>

所以在这个例子中，我想放<span class="style">1</span>和<span class="style">2</span> 。 围绕该段中的两个数字。

我正在尝试编写一个javascript来实现这一点，所以我不必回到我正在处理的文档中并手动在每个数字周围添加样式标记，因为文档很长。

到目前为止，这是我写的内容，但是我很难弄清楚如何将编辑内容重新组合到HTML段落中。

let regEx=/[0-9]/g;
let list = [];
let paragraphs = document.getElementsByTagName("p");
 for (var i = 0; i < paragraphs.length; i++) {
 let html = paragraphs[i].innerHTML;
 list.push(html);
   }
 // all paragraphs into one string.
 let joined = list.join(' ');
 // all the numbers in the paragraphs stored in array
 let numbers = joined.match(regEx);
// define array for styling edits
 let edits = [];
// adding the styling tags to each num
 numbers.forEach(function(num){

 edits.push('<span class="style">' + num + '</span>');

// outputs ["<span class='style'>3</span>", "<span class='style'>7</span>", "<span class='style'>4</span>", "<span class='style'>5</span>"]

 });
 // need to insert edits into paragraph html 

如果有人能就我如何能够实现这一目标提供任何建议，那将是一个很好的工作，我仍然是一个相对较新的使用JS。

Answer 1

const paragraphs = document.getElementsByTagName("p");

for (var i = 0; i < paragraphs.length; i++) {
  const regEx=/([0-9])/g;
  const newHtml = paragraphs[i].innerHTML.replace(regEx, '<span class="style">$1</span>');

  paragraphs[i].innerHTML = newHtml;
}

我更新你的正则表达式将数字放在一个组中，然后在字符串替换中你可以引用该组，因为只有一个它将是1美元。 正如你在替换中看到的那样，我们用适当的跨度包装它，然后将它直接插回到innerHTML中。

我注意到你的正则表达式只捕获一位数字，如果你想捕获多位数字，你可以像这样更新你的注册表：/（[0-9] +）/ g。

我创建了一个简单的jsfiddle来向您展示它是如何工作的： https ：//jsfiddle.net/andyorahoske/dd6k6ekp/35/

Answer 2

我将其中最基本的部分分解为可重用的功能，您可能会发现它在其他环境中很有用。

/**
 * Wraps numbers in a string with any provided wrapper.
 * @param  {String} str A string containing numbers to be wrapped.
 * @param  {String} wrapper A string with placeholder %s to define the wrapper. Example - <pre>%s</pre>
 * @return {String} The original string with numbers wrapped using the wrapper param.
 */
function wrapNumbers(str, wrapper) {
    var numbersInStr = str.match(/\d+/g) || [];
    var chunks = [];
    var segmentStart = 0;
    for(var i = 0; i < numbersInStr.length; i += 1) {
        var number = numbersInStr[i];
        var indexOfNumber = str.indexOf(number);
        var fWrapper = wrapper.replace('%s', number);
        chunks.push(str.slice(segmentStart, indexOfNumber));
        chunks.push(fWrapper);
        segmentStart = indexOfNumber + number.length;
    }
    if(segmentStart < str.length) {
        chunks.push(str.slice(segmentStart, str.length));
    }
    return chunks.join('');
}

要在您的用例中使用它，它可能如下所示：

var paragraphs = document.getElementsByTagName("p");
var wrapper = '<span class="style">%s</span>';
for(var i = 0; i < paragraphs.length; i += 1) {
    var paragraph = paragraphs[i];
    paragraph.innerHTML = wrapNumbers(paragraph.innerHTML, wrapper);
}

Codepen： https ：//codepen.io/bryceewatson/pen/vRqeVy ？ editors = 1111

Answer 3

这是一个新代码https://jsfiddle.net/fazanaka/au4jufrr/1/

var element = document.getElementById('text'),
    text = element.innerText,
    wordsArray = text.split(' '),
    newString;

for(var i = 0; i < wordsArray.length; i++){
    if(!isNaN(parseFloat(wordsArray[i])) && isFinite(wordsArray[i])){
    wordsArray[i] = "<span class='style'>" + wordsArray[i] + "</span>";
  }
}
newString = wordsArray.join(' ');
element.innerHTML = newString;

我希望它对你有所帮助

UPD：对于所有段落https://jsfiddle.net/fazanaka/qx2ehym4/