Question

我在jquery插件中使用了一些正则表达式代码，用空字符串替换了我的html代码。

hash.replace(/^.*#/, '').replace(/\?.*$/, '');

这里我应该怎么做才能使我的html代码无法用空字符串转义。就像我有HTML代码：

"Jquery is a scripting language.<br>
Most widely used language"

此文本具有break标记，因此将替换为空字符串

Answer 1

请尝试以下代码：

 hash = hash.replace(/(<([^>]+)>)/ig, '');

仅供参考，replace方法不会影响原始字符串，除非您使用新值更新它。

Answer 2

我强烈建议使用DOM API使用可能保留的白名单元素来解析和删除HTML元素，而不是使用正则表达式：

function stripHTML(opts) {
  // The default settings for the function, can be overridden
  // by the user,

  // HTML:         String of text/HTML from which the HTML elements
  //               should be removed.
  // allowedHTML:  Array of Strings, the HTML elements that are
  //               permitted to remain within the returned HTML string.

  var settings = {
      'html': null,
      'allowedHTML': ['h2', 'br']
    },

    // creating an element for containing the supplied String
    // of content in order for it to be parsed:
    temp = document.createElement('div'),

    // uninitialised variables for later use:
    allowedHTML,
    elementNodes,
    parent;

  // Iterating over the keys of the opts Object if one has
  // been supplied, otherwise we iterate over the empty
  // object-literal to prevent an error being thrown:
  Object.keys(opts || {}).forEach(function(key) {

    // here we update the settings Object with the
    // properties, and property-values, from the
    // opts Object (if supplied):
    settings[key] = opts[key];
  });

  // if we have a settings.html property-value, and
  // settings.html is a String:
  if (settings.html && 'string' === typeof settings.html) {

    // assign the settings.html String as the innerHTML of
    // the created-element:
    temp.innerHTML = settings.html;

    // retrieve all elements from the created-element using
    // the universal selector ('*') from CSS and converting
    // the resulting Array-like collection into an Array,
    // using Array.from():
    elementNodes = Array.from(temp.querySelectorAll('*'));

    // here we ensure that the Array of elements is of the
    // type ['h1','span'] not ['<h1>','<span>'] by iterating
    // over the array of settings.allowedHTML and returning
    // a new Array of its elements using Array.prototype.map():
    allowedHTML = settings.allowedHTML.map(function(el) {
      // 'el' the first argument is a reference to the
      // current Array-element of the Array over which
      // we're iterating.

      // returning the string having first removed all ('g')
      // incidences of '<' or ('|') '>' from said string:
      return el.replace(/<|>/g, '');
    });

    // iterating over the elementNodes Array:
    elementNodes.forEach(function(node) {
      // 'node' is (again) a reference to the current
      // Array-element of the Array over which we're
      // iterating.

      // caching a reference to the parentNode of the
      // current element:
      parent = node.parentNode;

      // if the node's localName (same as tagName, but
      // lower-case) is not found in the Array of allowed HTML:
      if (settings.allowedHTML.indexOf(node.localName) === -1) {


        // while the node has a firstChild:
        while (node.firstChild) {
          // we insert that firstChild into the
          // node's parentNode ahead of the node itself:
          parent.insertBefore(node.firstChild, node);
        }

        // removing the node from the parent:
        parent.removeChild(node);
      }
    });

    // here we return the innerHTML of the created-element,
    // having trimmed its leading and trailing white-space:
    return temp.innerHTML.trim();
  }
}

console.log(stripHTML({
  'html': "jQuery is a JavaScript library.<br>And is the most widely-used such library (at this time)"
}));
// => jQuery is a JavaScript library.<br>And is the most widely-used such library (at this time).

＆＃13;

function stripHTML(opts) {
  var settings = {
      'html': null,
      'allowedHTML': ['h2', 'br']
    },
    temp = document.createElement('div'),
    allowedHTML,
    elementNodes,
    parent;

  Object.keys(opts || {}).forEach(function(key) {
    settings[key] = opts[key];
  });

  if (settings.html && 'string' === typeof settings.html) {
    temp.innerHTML = settings.html;
    elementNodes = Array.from(temp.querySelectorAll('*'));
    
    allowedHTML = settings.allowedHTML.map(function(el) {
      return el.replace(/<|>/g, '');
    });
    
    elementNodes.forEach(function(node) {
      parent = node.parentNode;
      if (settings.allowedHTML.indexOf(node.localName) === -1) {
        
        while (node.firstChild) {
          parent.insertBefore(node.firstChild, node);
        }
        
        parent.removeChild(node);
      }
    });
    
    return temp.innerHTML.trim();
  }
}

console.log(stripHTML({
  'html': "jQuery is a JavaScript library.<br>And is the most widely-used such library (at this time). "
}));

＆＃13;

JS Fiddle demo

以上允许使用allowedHTML的空数组，这会导致函数删除所有 HTML标记（来自某些有限的测试）：

console.log(stripHTML({
  'html': "jQuery is a JavaScript library.<br>And is the most widely-used such library (at this time). ",
  'allowedHTML': []
}));
// => jQuery is a JavaScript library.And is the most widely-used such library (at this time).

＆＃13;

function stripHTML(opts) {
  var settings = {
      'html': null,
      'allowedHTML': ['h2', 'br']
    },
    temp = document.createElement('div'),
    allowedHTML,
    elementNodes,
    parent;

  Object.keys(opts || {}).forEach(function(key) {
    settings[key] = opts[key];
  });

  if (settings.html && 'string' === typeof settings.html) {
    temp.innerHTML = settings.html;
    elementNodes = Array.from(temp.querySelectorAll('*'));
    
    allowedHTML = settings.allowedHTML.map(function(el) {
      return el.replace(/<|>/g, '');
    });
    
    elementNodes.forEach(function(node) {
      parent = node.parentNode;
      if (settings.allowedHTML.indexOf(node.localName) === -1) {
        
        while (node.firstChild) {
          parent.insertBefore(node.firstChild, node);
        }
        
        parent.removeChild(node);
      }
    });
    
    return temp.innerHTML.trim();
  }
}

console.log(stripHTML({
  'html': "jQuery is a JavaScript library.<br>And is the most widely-used such library (at this time).",
  'allowedHTML': []
}));

＆＃13;

JS Fiddle demo

似乎可靠地应对 - 在任何浏览器都能够处理的情况下 - 无效的HTML，例如未打开的元素或重叠的元素＆＃39; （第一个打开元素的结束标记出现在第二个打开元素的结束标记之前）：

console.log(stripHTML({
  'html': "<div><h1>jQuery</div> is a JavaScript library.</h1><br>And is the most widely-used such library (at this time). "
}));
// => jQuery is a JavaScript library.<br>And is the most widely-used such library (at this time).

＆＃13;

function stripHTML(opts) {
  var settings = {
      'html': null,
      'allowedHTML': ['h2', 'br']
    },
    temp = document.createElement('div'),
    allowedHTML,
    elementNodes,
    parent;

  Object.keys(opts || {}).forEach(function(key) {
    settings[key] = opts[key];
  });

  if (settings.html && 'string' === typeof settings.html) {
    temp.innerHTML = settings.html;
    elementNodes = Array.from(temp.querySelectorAll('*'));

    allowedHTML = settings.allowedHTML.map(function(el) {
      return el.replace(/<|>/g, '');
    });

    elementNodes.forEach(function(node) {
      parent = node.parentNode;
      if (settings.allowedHTML.indexOf(node.localName) === -1) {

        while (node.firstChild) {
          parent.insertBefore(node.firstChild, node);
        }

        parent.removeChild(node);
      }
    });

    return temp.innerHTML.trim();
  }
}

console.log(stripHTML({
  'html': "<div><h1>jQuery</div> is a JavaScript library.</h1><br>And is the most widely-used such library (at this time). "
}));

＆＃13;

JS Fiddle demo

它似乎与（荒谬）嵌套一起管理：

console.log(stripHTML({
  'html': "<div>jQuery <h1>is <br>a <span><strong><em><span>JavaScript</span></em> library</strong></span>.</span><br>And is the most widely-used such library (at this time).</h1></div> "
}));

＆＃13;

function stripHTML(opts) {
  var settings = {
      'html': null,
      'allowedHTML': ['h2', 'br']
    },
    temp = document.createElement('div'),
    allowedHTML,
    elementNodes,
    parent;

  Object.keys(opts || {}).forEach(function(key) {
    settings[key] = opts[key];
  });

  if (settings.html && 'string' === typeof settings.html) {
    temp.innerHTML = settings.html;
    elementNodes = Array.from(temp.querySelectorAll('*'));

    allowedHTML = settings.allowedHTML.map(function(el) {
      return el.replace(/<|>/g, '');
    });

    elementNodes.forEach(function(node) {
      parent = node.parentNode;
      if (allowedHTML.indexOf(node.localName) === -1) {
        while (node.firstChild) {
          parent.insertBefore(node.firstChild, node);

        }
        parent.removeChild(node);
      }
    });
    return temp.innerHTML.trim();
  }
}

console.log(stripHTML({
  'html': "<div>jQuery <h1>is <br>a <span><strong><em><span>JavaScript</span></em> library</strong></span>.</span><br>And is the most widely-used such library (at this time).</h1></div> "
}));

＆＃13;

JS Fiddle demo

但是，我不能保证这对于在<script>函数的stripHTML字符串中插入html元素的人来说有效，或能够工作，如：

console.log(stripHTML({
  'html': "<script>alert('Will this work?'); console.log('Maybe not?');</" + "script>"
}));
// => alert('Will this work?'); console.log('Maybe not?');

// it doesn't work in my (again: limited) testing, and
// there's no evaluation (eval()) of the inserted, or resulting
// string so it should be safe. This is not a guarantee, so
// please: test your edge cases

＆＃13;

function stripHTML(opts) {
  var settings = {
      'html': null,
      'allowedHTML': ['h2', 'br']
    },
    temp = document.createElement('div'),
    allowedHTML,
    elementNodes,
    parent;

  Object.keys(opts || {}).forEach(function(key) {
    settings[key] = opts[key];
  });

  if (settings.html && 'string' === typeof settings.html) {
    temp.innerHTML = settings.html;
    elementNodes = Array.from(temp.querySelectorAll('*'));

    allowedHTML = settings.allowedHTML.map(function(el) {
      return el.replace(/<|>/g, '');
    });

    elementNodes.forEach(function(node) {
      parent = node.parentNode;
      if (settings.allowedHTML.indexOf(node.localName) === -1) {

        while (node.firstChild) {
          parent.insertBefore(node.firstChild, node);
        }

        parent.removeChild(node);
      }
    });

    return temp.innerHTML.trim();
  }
}

console.log(stripHTML({
  'html': "<script>alert('Will this work?'); console.log('Maybe not?');</"+"script>"
}));

＆＃13;

JS Fiddle demo

参考文献：

Array.from()。
Array.prototype.forEach()。
Array.prototype.indexOf()。
Array.prototype.map()。
document.createElement()。
document.querySelectorAll()。
Element.localName。
Guide to JavaScript Regular Expressions。
Node.firstChild。
Node.innerHTML。
Node.insertBefore()。
Node.parentNode。
Node.removeChild()。
Object.keys()。
String.prototype.replace()。
typeof operator。
while (...) statement。

我怎样才能在javascript中的正则表达式中转义和h2标签？

2 个答案: