Javascript find strings without element tags

Question

I am trying to get strings from html body that has elements "superscript and subscript" tags. So far i am able to get these tags. But i also want to have an option to find strings/characters that don't have the sup/sub tags. How can i find strings with no tags attached. Please help. My code below so far:

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>

(off-topic but hard not to mention) Maybe consider passing a parameter to your function rather than having a whole identical copy except ONE hard-coded string... — Romain Valeri
– Romain Valeri, Commented Jul 24, 2018 at 15:55
I don't think there is an easy way to get the values with no tags and even if you could it would become confusing if you had multiple values with no tags. Can you not just assign the items which you don't want in <sub> or <sup> a class so that they can easily be selected? — J. Campbell
– J. Campbell, Commented Jul 24, 2018 at 15:57
Look into Document.querySelector() for more powerful selectors. However, what are you trying to do, generally? I feel like there has to be a better strategy... — Ayman Safadi
– Ayman Safadi, Commented Jul 24, 2018 at 15:58
yes. i was actually trying to differentiate sup tags from sub tags and also characters with no above mentioned tags...i feel as J. Campbell said would possibly help...I will give a try. — SandeepTete
– SandeepTete, Commented Jul 24, 2018 at 16:01
your js won't work at all... very mess...please give a correct one. BTW, you refer Jquey, but did not use it for find sup or sub, why? — Dongdong
– Dongdong, Commented Jul 24, 2018 at 16:03

Dongdong · Accepted Answer · 2018-07-24 18:24:19Z

1

Jquery :contains() Selector could do the magic: https://api.jquery.com/contains-selector/

I don't know how to use code snippet, but you can find my jsfiddle: https://jsfiddle.net/dongdongdong/zfr0kd6t/

I added a select to your html:

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

about js part, the core code is:

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

here is js code

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");
});

answered Jul 24, 2018 at 18:24

Dongdong

2,53824 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SandeepTete Over a year ago

While this solution was there in my JS, this jquery made it simpler...though i am still not able to differentiate normal string from sub,sup tags...

intentionally-left-nil · Accepted Answer · 2018-07-24 16:07:14Z

This can be accomplished by iterating through all text nodes, and then searching their parents to find a sup or sub tag. See the below example:

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>

The above snippet looks for all non-empty text strings, and then searches their parent elements for a sub or sup element. If not, it console logs it. You can customize the filtering logic as needed to look for the exact scenarios you want.

Collectives™ on Stack Overflow

Javascript find strings without element tags

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related