时间戳

首页 > 解决方案 > Javascript 查找没有元素标签的字符串

javascript - Javascript 查找没有元素标签的字符串

问题描述

我正在尝试从具有元素“上标和下标”标签的 html 正文中获取字符串。到目前为止，我能够获得这些标签。但我也希望有一个选项来查找没有 sup/sub 标签的字符串/字符。我怎样才能找到没有附加标签的字符串。请帮忙。到目前为止我的代码如下：

function myFunction() {

  var e = document.getElementById("t1");
  var strUser = e.options[e.selectedIndex].value;

  var i;
  for (i = 0; i < strUser.length; i++) {
    var list = document.getElementsByTagName("SUP");
  }
  var y;
  for (y = 0; y < list.length; y++) {
    if(list[y].innerHTML.indexOf(strUser) !== -1) {
      $(list[y]).addClass("test");
    }
  }
}

function myFunctionr() {

  var e = document.getElementById("t1");
  var strUser = e.options[e.selectedIndex].value;

  var i;
  for (i = 0; i < strUser.length; i++) {
    var list = document.getElementsByTagName("SUB");
  }
  var y;
  for (y = 0; y < list.length; y++) {
    if(list[y].innerHTML.indexOf(strUser) !== -1) {
      $(list[y]).addClass("test");
    }
  }
}
.test {
  /*border: 3px inset red;*/
  background: red;
  color: white
}
#mydiv{
  background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <sup>&reg;</sup>
  <sup>&reg;</sup>
  <sup>&reg;</sup>
  <sub>&reg;</sub>
  <sub>&reg;</sub>
  <sub>&reg;</sub>
  <sub>&trade;</sub>
  <sup>&trade;</sup>
  <sup>&trade;</sup>
			&reg;
</div>
<select id="t1">
    <option value="&trade;">&trade;</option>
    <option value="&reg;" >&reg;</option>
</select></br></br>
<button onclick="myFunction()">Search Superscript</button>
<button onclick="myFunctionr()">Search Subscript</button>

标签： javascriptjqueryhtml

解决方案

这可以通过遍历所有文本节点，然后搜索它们的父节点以找到一个sup或sub标记来完成。请参见以下示例：

const nodeIterator = document.createNodeIterator(document.querySelector('#container'), NodeFilter.SHOW_TEXT, { acceptNode: (node) =>
node.data.trim().length === 0 ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT});

let node;
while ((node = nodeIterator.nextNode())) {
  const container = node.parentElement;
  if (['SUP', 'SUB'].indexOf(container.nodeName) === -1 && !container.closest('SUP, SUB')) {
    console.log('text not in a tag for', node.data);
  }
}
<div id="container">
  <sup>&reg;</sup>
  <span>not in a tag</span>
</div>

上面的代码片段查找所有非空文本字符串，然后在其父元素中搜索suborsup元素。如果没有，它会在控制台记录它。您可以根据需要自定义过滤逻辑以查找您想要的确切场景。

推荐阅读