Как получить содержимое (только) внутри тега HTML до одного уровня в Javascript? - PullRequest
Новая
       30

Как получить содержимое (только) внутри тега HTML до одного уровня в Javascript?

1 голос
/ 28 июня 2019

TLDR: необходимо решение javascript для этого вопроса Поиск и замена текста HTML, а не тегов

Я получил много ответов о том, что не использовать RegeX, но никто не дал точного решения этого вопроса. Я хочу перебрать каждый элемент DOM на странице. Найдите слово в тексте и замените HTML в том же месте слова . 

$(document).ready(function(){
  
  function isJson(item) {
    item = typeof item !== "string"
        ? JSON.stringify(item)
          : item;
    try {
        item = JSON.parse(item);
    } catch (e) {
        return false;
    }

    if (typeof item === "object" && item !== null) {
        return true;
    }
    return false;
  }

  function loop(elements, words) {
    elements.each(function(){
      element = $(this); 
      var text = element.html();
      for (k in words) {
   
        if(isJson(words[k])){
          defObj = JSON.parse(words[k]);
          for (var j = defObj["data"].length - 1; j >= 0; j--) {
            if (defObj["data"][j]["definition"]) {
              liText = (defObj["data"][j]["wordtype"] ? defObj["data"][j]["wordtype"] : defObj["data"][j]["partOfSpeech"]) + ";  "+ defObj["data"][j]["definition"];
            }else{
              liText = defObj["data"][j]["translatedText"];
            }
          } 
        }else{
          liText = words[k];
        }

        li = '<li>'+liText+'</li>';
        ol = '<ol style="padding: 15px !important; padding-right: 0px !important; margin: 0 auto !important;">'+li+'</ol>';
        
        var regex = new RegExp('(\\b)'+k+'(\\b)', 'ig');
        // replace the matched word with the ol list created above.
        text = text.replace(regex, ol); 
      }

      if (element.html() !== text) {
          element.html(text);
      }
    })
  }

  function getElements(el) {
    return $(el).withinviewport();
  }

  chrome.storage.sync.get(null, function(result) {
    //result is an object literal with words as key and its meaning as json string
    if (result) {
      loop($("li"), result);
      loop($("h5"), result);
      loop($("h6"), result);
    } 
  }); 
});

Пока что приведенный выше код работает отлично. Но он пропускает следующие случаи, принимая в качестве примера ключевое слово урегулировать , я не хочу сопоставлять приведенные ниже случаи, но мое регулярное выражение также соответствует этим. 

1. <h5 title="this settle line should not match"> This settle line should match </h5>

2. <li> this settle line should match <div> this settle line should not match </div> </li>

3. <li> <a href="abc"> this settle line should not match </a> this settle line should match </li>

4. <h6> this settle line should match 
     <div> 
        something random without settle word, so should not match  
        <h6> this settle line should also not match </h6> 
     </div> 
   </h6>

Этих случаев можно избежать, если я захочу заменить их текстом. Но для HTML это нарушает компоновку, если что-то внутри тега получает совпадения. Я сталкиваюсь с этой проблемой с 2 ​​лет, пожалуйста, помогите. Я открыт для любого решения.

1 Ответ

1 голос
/ 02 июля 2019

Мой ответ относится к первой части вопроса: «Сделайте то же самое в javascript, как в примере с python: Поиск и замена текста HTML, а не тегов "

Исходя из этого, вы должны выяснить, как разработать решение, которое изменяет содержимое тегов, как описано в части 2 вопросов.

Код работает, но это всего лишь концепция и требует рефакторинга. 

// the data:
var input = '<!DOCTYPE html>\
<html>\
    <head>\
    <title>Hello HTML</title>\
</head>\
<body>\
  <a href="#">abc</a>\
  <p>Hello 1</p>\
  <p>Hello 2</p>\
  <p>Hello 3</p>\
  <p>Hello 4</p>\
</body>\
</html>';


function string2xml(text) {
  try {
    var xml = null;
    if (window.DOMParser) {
      var parser = new DOMParser();
      xml = parser.parseFromString(text, 'text/xml');
      var foundErr = xml.getElementsByTagName('parsererror');
      if (!foundErr || !foundErr.length || !foundErr[0].childNodes.length) {
        return xml;
      }
      return null;
    }
  } catch (e) {
    ;
  }
}


// xml object input data:
var xmldoc = string2xml(input);


var out='';
out += '<!DOCTYPE html><html>';
// the head nodes:
out += xmldoc.getElementsByTagName('head')[0].outerHTML;
out += '<body>\n';
// the body nodes:
var nodes=xmldoc.getElementsByTagName('body')[0].children;
for (var i = 0; i < nodes.length; i++) {
	if(nodes.item(i).nodeName == 'p') {
		regex=/^[^4]*$/;
        	out += '<p>'+(nodes.item(i).innerHTML).replace(regex,"replaced")+'</p>\n';
        }
	else {
		out += nodes.item(i).outerHTML+'\n';
	}
}
out += '</body></html>';

// the output data:
console.log(out);
...