Question

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

Answer 1

这可以通过遍历所有文本节点，然后搜索其父级以找到Sub WorksheetLoop() Dim WS_Count As Integer Dim I As Integer Dim R As Integer ' Set WS_Count equal to the number of worksheets in the active ' workbook. WS_Count = ActiveWorkbook.Worksheets.Count R = 2 ' Begin the loop. For I = 1 To WS_Count If (InStr(1, ThisWorkbook.Worksheets(I).Name, "Test")) > 0 Then ThisWorkbook.Worksheets("Master").Cells(R, 1) = ActiveWorkbook.Worksheets(I).Name R = R + 1 End If Next I End Sub或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>®</sup> <span>not in a tag</span> </div>或sub元素。如果不是，它将通过控制台记录。您可以根据需要自定义过滤逻辑，以查找所需的确切方案。

Answer 2

jQuery :contains() Selector可以做到： https://api.jquery.com/contains-selector/

我不知道如何使用代码片段，但是您可以找到我的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");
});

JavaScript查找没有元素标签的字符串

2 个答案: