Two written interview questions about regular

One 、 The first question is

Exist in page id=hxContainer Of DOM Elements .
The DOM A random text will be given in the element , It may contain some links , such as https://www.baidu.com, perhaps www.baidu.com?from=leadtay.
If the link text appears , Please label the link text , The user can directly open the link in a new window after clicking .
Please use javascript complete link function , Complete the function
1、hxContainer Only plain text content , It doesn't include anything else dom Elements
2、 Identify all with http://、https:// perhaps www. Start link
3、 all www. Links at the beginning , By default http agreement
4、 All links open in a new window
function link() {
}

1. Main code

function link() {
    
		    var obj = document.getElementById('jsContainer')
		    var container = obj.innerHTML
		    // console.log(container)
		    var reg = /(http:\/\/|https:\/\/)?www.[-A-Za-z0-9+&@#/%?~=_|!:,.;]+/g
		    // ?  Indicates zero or one match 
		    // +  Represents a match   Once to many times  ( At least once )
		    // 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')
		    	// ^  Represents the starting position of the matching string  
		    	if(/^www./.test(text)){
    
		    		text = 'http://'+text
		    	}
		    	return '<a target="_blank" href='+text+'>'+text+'</a>';
		    })
		    obj.innerHTML = result
		}
		link()

2. Expanding knowledge

2.1 Find all the indexes in a string

var str = "I learned to play the Ukulele in Lebanon."
var regex = /le/gi, result, indices = [];
while ( (result = regex.exec(str)) ) {
    
// It's through a specified pattern （pattern） Search string , And return the found text 
    indices.push(result.index);
}

2.2 js Identify links in strings and make them jump

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()  Method returns the modified string where the pattern is replaced .
 return "<a href='" + $url + "' target='_blank'>" + $url + "</a>";
});
console.log(content);

2.3 Regular replace in $

replace Change the string color 
<script language="javascript">
var str=" Miami Heat got 2011-2012 season NBA Champion , I Love Miami  ！";
var newStr=str.replace(/( Miami )/g,"<font color=red>$1</font>");
document.write(newStr);
</script>

 Enter search string 
<script language="javascript">
	// Find string , And turn the matching string into red 
	document.write(" Miami Heat got 2011-2012 season NBA Champion , I Love Miami  ！");
	var s=prompt(" Please enter the character you want to find "," Miami ");
	var reg=new RegExp("("+s+")","g");
	var str=" Miami Heat got 2011-2012 season NBA Champion , I Love Miami  ！";
	var newstr=str.replace(reg,"<font color=red>$1</font>"); //$1 Indicates the contents in parentheses in the expression on the left , That is, the first sub match , The same can be $2 Indicates the second sub match 
	// Maybe everyone will be right $1 The meaning of this special character is not well understood , Actually $1 It represents the characters in parentheses in the expression on the left , That is, the first sub match , The same can be $2 Indicates the second sub match .. What is sub matching ？？ Popular point , That is, each bracket on the left matches the first word , The second bracket is the second sub match ..
	document.write(newstr);
</script>

Two 、 The second question is

css There is often something like background-image Such passage - Connected characters , adopt javascript When setting a style, you need to convert it to backgroundImage Hump format , Please create a function to realize this conversion function ：

1. With - Separator , Capitalize the first letter of the second non empty word
2. Each word is capitalized with only the first letter
3. If it starts with -, Delete
4. Non letters remain unchanged

Example
Input Output
1 font-size fontSize
2 Font-NAME fontName
3 -webkit-border-image webkitBorderImage
4 table-style-1 tableStyle1

2.1 Main code

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])) {
    
             // ^  Represents the starting position of the matching string  
             // *  Represents a match   Zero to many 
                 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')
 )

link : https://blog.csdn.net/yexudengzhidao/article/details/84968787
link : https://www.it1352.com/1003715.html
link : https://www.csdn.net/tags/MtTaMg4sOTQ4ODE2LWJsb2cO0O0O.html
link : 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
link : https://blog.csdn.net/w4bobo/article/details/7685836
link : https://blog.csdn.net/weixin_40119412/article/details/108145026