js判断字符串是否是Html或者url及html反转方案

前言

本文主要是技术积累文章，主要记录收集几个 js 判断是否是 html，及判断 url 正则及 html 转义方案。

js 判断字符串是否是 html

方案一：

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

方案二：

function isHtml(input) {return /|?w+;/i.test(input);
}

方案三：

const isHTML = (text) => {
  try {const fragment = new DOMParser().parseFromString(text,"text/html");
    return fragment.body.children.length>0
  } catch(error) {;}  
  return false;
}

js 判断字符串是否是 url（仅 http/https）

要求不高的化，可以简单判断一下 https 和 http 就可以了

/^(http:|https:)/ig

严格判断可以用如下：

function validURL(str) {
  var pattern = new RegExp('^(https?:\/\/)?' + // protocol
      '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|' + // domain name
      '((\d{1,3}\.){3}\d{1,3}))' + // OR ip (v4) address
      '(\:\d+)?(\/[-a-z\d%_.~+]*)*' + // port and path
      '(\?[;&a-z\d%_.~+=-]*)?' + // query string
      '(\#[-a-z\d_]*)?$',
    'i'
  ); // fragment locator
  return !!pattern.test(str);
}

通过 new Url 的方案的化，兼容性不好，ie11 不支持，可以用如下：

function isValidHttpUrl(string) {
  let url;

  try {url = new URL(string);
  } catch (_) {return false;}

  return url.protocol === 'http:' || url.protocol === 'https:';
}

html 转义方案

后端对提交的数据进行了一些转义操作，比如

 
123&456

这样的，会被转义成

 
123&456

然后前端请求数据时，这些数据需要反转义一下。

通过如下方式

export function HTMLDecode(text) {var temp = document.createElement('div');
  temp.innerHTML = text;
  var output = temp.innerText || temp.textContent;
  temp = null;
  return output;
}

编译方式

//HTML 转义
function HTMLEncode(html) {var temp = document.createElement('div');
  temp.textContent != null
    ? (temp.textContent = html)
    : (temp.innerText = html);
  var output = temp.innerHTML;
  temp = null;
  return output;
}

var tagText = '
123&456
';
console.log(HTMLEncode(tagText)); //
123&456