JS 在字符串中搜索字符串或 html 标签，即使搜索的词没有连接在一起

Question

我的网站上有一个代码编辑器，在用户运行代码后，我想验证代码是否正确。

例如，如果用户写了下面的代码：

<p>Some text</p>

我想验证代码是否包含 <p> 标签。

我尝试了什么：

if(language == "HTML"){
    if (html_code.includes(expected)) {
        alert('right!');
    }
    else {
       alert("wrong");
    }
}

但只有当用户在 <p> 标签之间不输入任何内容时它才有效。

那么我如何才能找到代码是否包含某些标签？

Answer 1

var x = document.getElementById(“myId”).value;
if (x.includes(“html”) && x.includes(“ ”) == true) {
    alert(“html tag added”)
} else {
    alert(“that tag does not exist”)
}

Answer 2

尝试：

var myHtml = 'Aenean lacinia bibendum <a href="/life">life</a> sed consectetur. <a href="/work">Work</a> quis risus eget urna mollis ornare <a href="/about">about</a> leo.';

var result = myHtml.search(/<\s*a[^>]*>(.*?)<\s*\/\s*a>/g);
if (result >-1) {
    alert('right!');
} else {
     alert("wrong");
}

您可以将“a”替换为其他标签名称，例如“p”

Answer 3

使用DOMParser to make the raw HTML string into a Document对象，它类似于浏览器在解析HTML代码时通常形成的DOM树

function isElementPresent(htmlContent, tag) {
  var tagFound = false;

  var parser = new DOMParser();
  var parsedHtml = parser.parseFromString(htmlContent, 'text/html'); //mimeType of html is text/html
  var listEls = parsedHtml.all

  //all property is [HTMLCollection] holding all the elements (nested or otherwise) that are in the DOM tree

  for (var i = 0; i < listEls.length; i++) {
    if (listEls[i].tagName.toLowerCase() == tag) {
      tagFound = true;
    }
  }
  return tagFound;
}


htmlContent = `<div>

            <p><b>Demo</b></p>
            <div><h2>Hello</h2></div>

          </div>`;

alert( isElementPresent(htmlContent, 'p')     ) //true
alert( isElementPresent(htmlContent, 'audio') ) //false

JS 在字符串中搜索字符串或 html 标签，即使搜索的词没有连接在一起

JS search a string or html tag inside a string even if the searched term is not joined together

html

javascript

jquery

codemirror

laravel