Javascript 查找没有元素标签的字符串答案

【问题标题】：Javascript find strings without element tagsJavascript 查找没有元素标签的字符串
【发布时间】：2018-07-24 15:51:39
【问题描述】：

我正在尝试从具有元素“上标和下标”标签的 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>

【问题讨论】：

（离题但很难不提）也许考虑将参数传递给您的函数，而不是拥有一个完全相同的副本，除了一个硬编码字符串......
我认为没有一种简单的方法可以获取没有标签的值，即使你有多个没有标签的值也会变得混乱。你能不能只将你不想要的项目分配在 _{或 ^{一个类中，以便可以轻松选择它们？}}
查看Document.querySelector() 以获得更强大的选择器。但是，一般来说，你想做什么？我觉得必须有更好的策略......
是的。我实际上是在尝试将 sup 标签与子标签以及没有上述标签的字符区分开来……我觉得 J. Campbell 说的可能会有所帮助……我会试一试。
你的 js 根本无法工作...非常混乱...请给一个正确的。顺便说一句，您引用了 Jquey，但没有将它用于 find sup 或 sub，为什么？

标签： javascript jquery html

【解决方案1】：

Jquery :contains() Selector 可以做到这一点： https://api.jquery.com/contains-selector/

我不知道如何使用代码sn-p，但你可以找到我的jsfiddle： https://jsfiddle.net/dongdongdong/zfr0kd6t/

我在您的 html 中添加了一个选择：

<select id="t0">
    <option value="#container">All</option>
    <option value="sup">SUP</option>
    <option value="sub" >SUB</option>
</select>

关于js部分，核心代码是：

$("xxx:contains('xxxx')").highlight(text, "test");

这里是js代码

jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "g");

    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
}; 

$('#search').click(function() {
  $('.test').removeClass('test');
  var text = $('#t1').val();
  $($('#t0').val()+":contains('"+text+"')").highlight(text, "test");
});

【讨论】：

虽然我的 JS 中有这个解决方案，但这个 jquery 让它变得更简单......虽然我仍然无法区分普通字符串和 sub,sup 标签......

【解决方案2】：

这可以通过遍历所有文本节点，然后搜索它们的父节点以找到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>

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

【讨论】：