关于正则的两道笔试面试题

一、第一题

页面中存在id=hxContainer的DOM元素。
该DOM元素内会给出一段随机文本，可能包含一些链接，比如https://www.baidu.com，或者www.baidu.com?from=leadtay。
如果出现链接文本，请给该链接文本加上链接标签，用户点击后能直接在新窗口中打开该链接。
请用javascript完成 link函数，完成该功能
1、hxContainer只有纯文本内容，不包含其他dom元素
2、识别所有以http://、https://或者www.开始的链接
3、所有www.开头的链接，默认使用 http 协议
4、所有链接在新窗口打开
function link() {
}

1.主要代码

function link() {
		    var obj = document.getElementById('jsContainer')
		    var container = obj.innerHTML
		    // console.log(container)
		    var reg = /(http:\/\/|https:\/\/)?www.[-A-Za-z0-9+&@#/%?~=_|!:,.;]+/g
		    // ?  表示匹配零次或一次
		    // +  表示匹配 一次到多次 (至少有一次)
		    // var res = null
		    // while((res=reg.exec(container))!==null){
		    // 	console.log(res[0])
		    // }
		    // var res = reg.exec(container)
		    // console.log(res)
		    var result = container.replace(reg, function (text) {
		    	console.log(text)
		    	console.log('aaaa')
		    	//  ^  表示匹配字符串的开始位置  
		    	if(/^www./.test(text)){
		    		text = 'http://'+text
		    	}
		    	return '<a target="_blank" href='+text+'>'+text+'</a>';
		    })
		    obj.innerHTML = result
		}
		link()

2.扩展知识

2.1 查找一个字符串中所有出现的索引

var str = "I learned to play the Ukulele in Lebanon."
var regex = /le/gi, result, indices = [];
while ( (result = regex.exec(str)) ) {
//它通过指定的模式（pattern）搜索字符串，并返回已找到的文本
    indices.push(result.index);
}

2.2 js识别字符串中的链接并使之可跳转

function translateHtml(msg){
       var reg = /((http|https):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g;
       var textR = msg.replace(reg, "<a href='$1' target='_blank' style='color: #00a0e9;width: 360px;display: inline;'>$1</a>");
       return textR;
}

var regexp = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|\&|-)+)/g;
content = content.replace(regexp, function($url){
//replace() 方法返回模式被替换处修改后的字符串。
 return "<a href='" + $url + "' target='_blank'>" + $url + "</a>";
});
console.log(content);

2.3 正则中replace中$

replace改变字符串颜色
<script language="javascript">
var str="迈阿密热火获得了2011-2012赛季NBA总冠军，我爱迈阿密！";
var newStr=str.replace(/(迈阿密)/g,"<font color=red>$1</font>");
document.write(newStr);
</script>

输入查找字符串
<script language="javascript">
	//查找字符串，并将匹配的字符串变为红色
	document.write("迈阿密热火获得了2011-2012赛季NBA总冠军，我爱迈阿密！");
	var s=prompt("请输入要查找的字符","迈阿密");
	var reg=new RegExp("("+s+")","g");
	var str="迈阿密热火获得了2011-2012赛季NBA总冠军，我爱迈阿密！";
	var newstr=str.replace(reg,"<font color=red>$1</font>"); //$1表示左边表达式中括号内的内容，即第一个子匹配，同理可得$2表示第二个子匹配
	//可能大家都会对$1这个特殊字符表示什么意思不是很理解，其实$1表示的就是左边表达式中括号内的字符，即第一个子匹配，同理可得$2表示第二个子匹配。。什么是子匹配呢？？通俗点讲，就是左边每一个括号是第一个字匹配，第二个括号是第二个子匹配。。
	document.write(newstr);
</script>

二、第二题

css中经常有类似background-image这种通过-连接的字符，通过javascript 设置样式的时候需要将这种样式转换成backgroundImage驼峰格式，请创建函数实现此转换功能：

1. 以-为分隔符，将第二个起的非空单词首字母转为大写
2. 每个单词仅有首字母大写
3. 若开头为-，则删除
4. 非字母保持不变

示例
输入 输出
1 font-size fontSize
2 Font-NAME fontName
3 -webkit-border-image webkitBorderImage
4 table-style-1 tableStyle1

2.1 主要代码

function cssStyle2DomStyle(sName) {
 let pname=sName.split('-')
 for(let i=0,len=pname.length;i<len;i++){
  if(pname[i]===''){
   pname.splice(i,1)
  } 
 }
 // console.log(pname)
 let Str=''
 for(let index=0,len=pname.length;index<len;index++){
  if(index==0){
   Str += pname[index]
  }else{
   let Fletter=pname[index].slice(0,1).toUpperCase()
   let Rest=pname[index].slice(1)  
   Str +=Fletter+Rest
  }
 }
 return Str
}
let str='-webkit-border-image'
console.log(cssStyle2DomStyle(str))

function getDomStyle(sName) {
     let newCss = []
     let dataList = sName.split('-')
     if (!dataList[0]) {
         dataList.shift()
     }
     console.log(dataList)
     dataList.forEach((item, index) => {
         if (index == 0) {
             newCss[index] = item.toLowerCase()
         } else {
             let newLetter = []
             let newStr = ''
             let secondItem = item.split('')
             if (/^[a-zA-Z]*$/.test(secondItem[0])) {
             //  ^  表示匹配字符串的开始位置 
             //  *  表示匹配 零次到多次
                 let newLetter = []
                 secondItem.forEach((pitem, pindex) => {
                     if (pindex == 0) {
                         newLetter.push(pitem.toUpperCase())
                     } else {
                         newLetter.push(pitem.toLowerCase())
                     }
                 })
                 newStr = newLetter.join('')
             } else {
                 newStr = item
             }
             newCss[index] = newStr
         }
     })
     return newCss.join('')
 }
 console.log(
     getDomStyle('font-size'),
     getDomStyle('Font-NAME'),
     getDomStyle('-webkit-border-image'),
     getDomStyle('table-style-1')
 )

链接: https://blog.csdn.net/yexudengzhidao/article/details/84968787
链接: https://www.it1352.com/1003715.html
链接: https://www.csdn.net/tags/MtTaMg4sOTQ4ODE2LWJsb2cO0O0O.html
链接: https://blog.csdn.net/iteye_2449/article/details/81767762?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-1-81767762-blog-7685836.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-1-81767762-blog-7685836.pc_relevant_default&utm_relevant_index=2
链接: https://blog.csdn.net/w4bobo/article/details/7685836
链接: https://blog.csdn.net/weixin_40119412/article/details/108145026