title，hover显示的内容解析问题。

Question

1.以下是前端代码：
<p class="des-p" title="' + words[i].searchProfile + '">' + words[i].searchProfile + '</p>

在p标签中，有一个title的属性。当鼠标经过会显示title中的内容。细心的朋友能发现，title标签中的内容是通过发送ajxa请求，循环遍历出来的。

目前的问题是的，鼠标经过显示 title中的内容时，存在以下的标签样式：

<font color='red'>美好</font>智能手机 3GB 32GB 800万像素 标准广角 1200 200万像素 双后置摄像头 LED闪光灯 5.99英寸2160x1080,电容 多点触控

观察以上的的结果：<font color='red'>美好</font> 有一个这样的样式。

那么，问题来了，请问怎样将这样的一个样式给解析出来。

也就是说，当鼠标经过时，只让显示这样的内容：
美好 智能手机 3GB 32GB 800万像素 标准广角 1200 200万像素 双后置摄像头 LED闪光灯 5.99英寸2160x1080,电容 多点触控。

去掉<font color='red'></font>

请各位前端大神，给我提供一下思路，谢谢！！

Answer 1

不要用title 了，写鼠标hover 事件。控制权大多了，你想要的效果都能自己控制。

Answer 2

你在拼接的时候，用正则把html的标签取消或者替换掉在拼接到title中。

不要直接拼接。

要看你拼接的内容有哪些，如果就一个<font color='red'></font>的话，replace() 之后再拼上去就行了

【更新】

如果只有一个的话，正则都不用，最粗暴的方式：

    var str ="<font color='red'>美好</font>智能手机 3GB 32GB 800万像素 标准广角 1200 200万像素 双后置摄像头 LED闪光灯 5.99英寸2160x1080,电容 多点触控";
    str = str.replace(/<font color='red'>/g, "").replace(/<\/font>/g, "");
    console.log(str);

【更新】

    var strArr = [
        "<font color='red'>美好</font>智能手机 3GB 32GB 800万像素 标准广角 1200 200万像素 双后置摄像头 LED闪光灯 5.99英寸2160x1080,电容 多点触控",
        "<font color='red'>美好</font>智能手机 3GB 32GB 800万像素 标准广角 1200 200万像素 双后置摄像头 LED闪光灯 5.99英寸2160x1080,电容 多点触控",
        "<font color='red'>美好</font>智能手机 3GB 32GB 800万像素 标准广角 1200 200万像素 双后置摄像头 LED闪光灯 5.99英寸2160x1080,电容 多点触控",
        "<font color='red'>美好</font>智能手机 3GB 32GB 800万像素 标准广角 1200 200万像素 双后置摄像头 LED闪光灯 5.99英寸2160x1080,电容 多点触控",
        "<font color='red'>美好</font>智能手机 3GB 32GB 800万像素 标准广角 1200 200万像素 双后置摄像头 LED闪光灯 5.99英寸2160x1080,电容 多点触控"
    ];
    var htm ='';
    strArr.forEach(function(item,index){
        htm += '<p class="des-p" title="' + item.replace(/<font color='red'>/g, "").replace(/<\/font>/g, "") + '">' + item + '</p>';
    });
    document.body.innerHTML = htm;