Question

这是我的字符串

<img class="img" src="a.png"><img class="img" src="a.png"><img class="img" src="a.png">

我要检查字符串是否仅包含html标记

dwd<img class="img" src="a.png">dwd<img class="img" src="a.png"><img class="img" src="a.png"> dwd

如果包含上述示例中的任何字符串，我想返回false

我在这里有一些代码可以检查

function isHTML(str) {
  var a = document.createElement('div');
  a.innerHTML = str;

  for (var c = a.childNodes, i = c.length; i--; ) {
    if (c[i].nodeType == 1) return true; 
  }

  return false;
}


isHTML('<a>this is a string</a>') // true
isHTML('this is a string')        // false
isHTML('this is a <b>string</b>') // true

正如我们在第三个示例中看到的那样，它返回true，并且有一些带有html标签的字符串，因此，如果只有html标签没有文本，那么我该如何编辑它并使其返回true

此处是另一种方法，但与上面相同

var isHTML = RegExp.prototype.test.bind(/(<([^>]+)>)/i);

isHTML('Testing');               // false
isHTML('<p>Testing</p>');        // true
isHTML('<img src="hello.jpg">'); // true
isHTML('My <p>Testing</p> string');   // true (caution!!!)
isHTML('<>');                    // false

它的好方法，但是isHTML('My <p>Testing</p> string'); // true (caution!!!)

在这里我想返回false，因为有一些带有html标签的字符串

Answer 1

一切都很好。我的解决方案是

const element = document.querySelector('.test_element');

const setHtml = elem =>{
    let getElemContent = elem.innerHTML;

    // Clean Up whitespace in the element
    // If you don't want to remove whitespace, then you can skip this line
    let newHtml = getElemContent.replace(/[\n\t ]+/g, " ");

    //RegEX to check HTML
    let checkHtml = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/.test(getElemContent);

    //Check it is html or not
    if (checkHtml){
        console.log('This is an HTML');
        console.log(newHtml.trim());
    }
    else{
        console.log('This is a TEXT');
        console.log(elem.innerText.trim());
    }
}

setHtml(element);

Answer 2

它的好方法，但是isHTML('My <p>Testing</p> string'); // true (caution!!!)

这是一个好方法，只需在正则表达式的开头和结尾使用^和$，代码就可以工作。

var isHTML = RegExp.prototype.test.bind(/^(<([^>]+)>)$/i);

console.log(isHTML('Testing'));               // false
console.log(isHTML('<p>Testing</p>'));        // true
console.log(isHTML('<img src="hello.jpg">')); // true
console.log(isHTML('My <p>Testing</p> string'));   // true (caution!!!)
console.log(isHTML('<>'));                    // false

Answer 3

这是一种快速而棘手的方法。

它的作用是使用浏览器的内置xml解析来处理所有嵌套的内容（使用js regex通常不容易）。然后，它会渗透到元素及其子元素中，以搜索任何Text节点。

function isOnlyHTML(testMe) {
  const testMeEl = document.createElement("div");
  testMeEl.innerHTML = testMe;  // browser does the parsing
  return hasNoTextChildren(testMeEl);
}

// recursively check for text elements
function hasNoTextChildren(element) {
  for (let i = 0; i < element.childNodes.length; i++) {
    const child = element.childNodes[i];
    if (child instanceof Text) {
       return false; 
    } else if(hasNoTextChildren(child) === false) {
      return false;
    }
  }
  return true;
}

编辑：从您的测试看来，您只是想查找字符串是否是一个单独的html元素，在此之前或之后（但也许在内部）没有文本。在这种情况下，将^和$添加到正则表达式的另一种答案就足够了，也许首先进行修整即可。

Answer 4

选项1：使用RegExp和字符串替换：

const isHTML = (str) => !(str || '')
  // replace html tag with content
  .replace(/<([^>]+?)([^>]*?)>(.*?)<\/\1>/ig, '')
  // remove remaining self closing tags
  .replace(/(<([^>]+)>)/ig, '')
  // remove extra space at start and end
  .trim();

console.log(isHTML('Testing'));                         // false
console.log(isHTML('<p>Testing</p>'));                  // true
console.log(isHTML('<img src="hello.jpg">'));           // true
console.log(isHTML('My <p>Testing</p> string'));        // false
console.log(isHTML('<p>Testing</p> <p>Testing</p>'));   // true
console.log(isHTML('<>'));                              // false
console.log(isHTML('<br>'));                            // true

选项2：使用DOM API

const isHTML = (str) => {
  const fragment = document.createRange().createContextualFragment(str);
  
  // remove all non text nodes from fragment
  fragment.querySelectorAll('*').forEach(el => el.parentNode.removeChild(el));
  
  // if there is textContent, then not a pure HTML
  return !(fragment.textContent || '').trim();
}

console.log(isHTML('Testing'));                         // false
console.log(isHTML('<p>Testing</p>'));                  // true
console.log(isHTML('<img src="hello.jpg">'));           // true
console.log(isHTML('My <p>Testing</p> string'));        // false
console.log(isHTML('<p>Testing</p> <p>Testing</p>'));   // true
console.log(isHTML('<>'));                              // false
console.log(isHTML('<br>'));                            // true

javascript检查字符串是否仅包含html

4 个答案: