javascript - 检查script标签中的内容

Question

我使用jquery为所有逗号添加了span标签来添加css类。不幸的是，它在脚本内添加了span标签并被折叠。我想检查内容是否不在脚本标签中并添加span标签。我想替换除脚本标签中的内容之外的所有逗号(，)。

if ($("#overview").length > 0) {
   $("#overview").html( $("#overview").html().replace(/,/g,"<span class='comma'>,</span>")); 
}

Answer 1

您需要小心，因为 html 属性还可以包含带有“,”的文本。

解决此问题的一种方法是通过 TextNode 进行迭代，并将每个值拆分为多个 TextNodes，并用 SpanNode 分隔。

// get all text nodes excluding the script
function getTextNodes(el) {
  if (el.nodeType == 3) {  // nodeType 3 is a TextNode
    return el.parentElement && el.parentElement.nodeName == "SCRIPT" ? [] : [el];
  }
  return Array.from(el.childNodes)
    .reduce((acc, item) => acc.concat(getTextNodes(item)), []);
}

// this will replace the TextNode with the necessary Span and Texts nodes
function replaceComma(textNode) {
  const parent = textNode.parentElement;
  const subTexts = textNode.textContent.split(',');  // get all the subtexts separated by ,

  // for each item in subtext it will insert a new TextNode with a SpanNode
  // (iterate from end to beginning to use the insertBefore function)
  textNode.textContent = subTexts[subTexts.length - 1];
  let currentNode = textNode;
  for(var i = subTexts.length - 2;  i>= 0 ; i --) {
    const spanEl = createCommaEl();
    parent.insertBefore(spanEl, currentNode);
    currentNode = document.createTextNode(subTexts[i]);
    parent.insertBefore(currentNode, spanEl)
  }
}

// create the html node: <span class="comma">,</span>
// you can do this more easy with JQUERY
function createCommaEl() {
  const spanEl = document.createElement('span');
  spanEl.setAttribute('class', 'comma');
  spanEl.textContent = ',';
  return spanEl;
}

// then, if you want to replace all comma text from the element with id 'myId'
// you can do
getTextNodes(document.getElementById('myId'))
  .forEach(replaceComma);