代码之家 › 专栏 › 技术社区 › Cain Nuke

试图将字符串拆分为数组时str.match不起作用

string arrays javascript

-2

Cain Nuke · 技术社区 · 7 年前

你好,

我需要从HTML元素的文本中创建一个变量,即

<div id="topcmm-123flashchat-sound-messages-contents" style="height:auto;"><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Gasp for supprise</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Giggle</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Say hello</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Come on</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Kick somebody out</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Kiss somebody</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Scream</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Yawn for sleepy</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Snoring</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div></div>

我这样声明变量

var elt = document.getElementById("topcmm-123flashchat-sound-messages-contents");
var lists = elt.textContent;

我期待着这样的事情:

Gasp for surprise    Giggle    Say hello    Come on    Kick somebody out    Kiss somebody    Scream    Yawn for sleepy    Snoring

console.log(lists); 确切地说,这意味着没有问题,对吧?

现在,我需要将所有这些转换成一个如下所示的数组:

var sounds = {
  "gasp" : {
    url : "gasp.mp3",
  },
  "giggle" : {
    url : "giggle.mp3",
  },
[...]
  "scream" : {
    url : "scream.mp3",
  },
  "snoring" : {
    url : "snoring.mp3",
  }
};

所以我使用下面的代码:

var lists = elt.textContent;
const sounds = lists.toLowerCase().split('    ').reduce((accum, str) => {
                const name = str.match(/^([^ ]+)/)[0];
                accum[name] = { url: '/../flashsound/' + name + '.mp3' };
                return accum;
              }, {});

因为某种原因它不能工作。我得到一个错误,说str.match是空的。我查过了 console.log(sounds); 什么都没有。这里有什么问题?

谢谢您。

1 回复 | 直到 7 年前

CertainPerformance 7 年前

问题是 textContent 不返回您列出的字符串:

'Gasp for surprise    Giggle    Say hello    Come on    Kick somebody out    Kiss somebody    Scream    Yawn for sleepy    Snoring'

它实际上返回带有一些附加填充的字符串:

'  Gasp for supprise    Giggle    Say hello    Come on    Kick somebody out    Kiss somebody    Scream    Yawn for sleepy    Snoring   ';

var elt = document.getElementById("topcmm-123flashchat-sound-messages-contents");
var lists = elt.textContent;
console.log(`"${lists}"`);

<div id="topcmm-123flashchat-sound-messages-contents" style="height:auto;"><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Gasp for supprise</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Giggle</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Say hello</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Come on</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Kick somebody out</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Kiss somebody</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Scream</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Yawn for sleepy</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Snoring</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div></div>

所以,当第一次迭代 reduce 运行时,它尝试匹配第一个字符串:

'  gasp for supprise'

反对

/^([^ ]+)/

普通语言:字符串的开头,后跟1个或多个非空格字符。但是绳子开始因为有空格,所以regex失败。

修复它, trim() 这个 文本内容 第一:

var lists = elt.textContent.trim();

但还有另一个问题:您当前的代码将URL转换成类似这样的内容:

"url": "/../flashsound/gasp.mp3"

但你说你想要

url : "gasp.mp3",

所以,去掉开头 /../flashsound/ 设置URL时:

const elt = document.getElementById("topcmm-123flashchat-sound-messages-contents");
const lists = elt.textContent.trim();
const sounds = lists.toLowerCase().split('    ').reduce((accum, str) => {
  const name = str.match(/^([^ ]+)/)[0];
  accum[name] = {
    url: name + '.mp3'
  };
  return accum;
}, {});
console.log(sounds);

<div id=“topcmm-123flashchat-sound-messages-contents”style=“height:auto;”><div class=“topcmm-123flashchat-light-color-panel-singe-bar-block”onmouseover=“this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block-over'”onmouseout=“this.classname='topcmm-123flashchat-light-color-paNEL SINGE BAR BLOCK'“><span class=“topcmm-123flashcat-light-color-panel-sound-text”>喘息等待补充</span><span class=“topcmm-123flashcat-light-color-panel-sound-test-icon”>/lt;/span><span class=“topcmm-123flashcat-light-color-panel-sound-sent-icon”>/span></Div><Div class=“topcmm-123flashcat-light-color-panel-singe-bar-block”onmouseover=“this.classname='topcmm-123flashcat-light-color-panel-singe-bar-block-over'”onmouseout=“this.classname='topcmm-123flashcat-light-color-panel-singe-bar-block'”><span class=“topcmm-123flashcat-浅色面板声音文本“>咯咯笑</span><span class=“topcmm-123flashchat-light-color-panel-sound-test-icon”>/lt;/span><span class=“topcmm-123flashchat-light-color-panel-sound-sent-icon”>/lt;/span>/Div><Div class=“topcmm-123flashchat-light-color-panel-singe”-bar block“onmouseover=”this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block-over'“onmouseout=”this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block'“><span class=”topcmm-123flashchat-light-color-panel-sound-text“>打招呼</span><span class=”topcmm-123flashchat-light-color-panel-sound-test-icon“>/lt;/span><span class=“topcmm-123flashchat-light-color-panel-sound-sent-icon”></span>/div><div class=“topcmm-123flashchat-light-color-panel-singe-bar-block”onmouseover=“this.classname='topcmm-123flashchat-light-col”或panel singe bar block over'”onmouseout=“this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block'”><span class=“topcmm-123flashchat-light-color-panel-sound-text”>打开</span><span class=“topcmm-123flashchat-light-color-panel-sound-test-icon”>/span>。<span class=“topcmm-123flashchat-light-color-panel-sound-sent-icon”></span>/div><div class=“topcmm-123flashchat-light-color-panel-singe-bar-block”onmouseover=“this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block-over'”onmouseout=“this.classname='topcmm-123flashchat light color panel singe bar block'“><span class=“topcmm-123flashchat-light-color-panel-sound-text”>将某人踢出</span><span class=“topcmm-123flashchat-light-color-panel-sound-test-icon”>/lt;/span><span class=“topcmm-123flashchat-light-color-panel-sound-sent-icon“></span>/Div><Div class=“topcmm-123flashchat-light-color-panel-singe-bar-block”onMouseOver=“this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block-over'”onMouseOut=“this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block'”><span class=“topcmm-123flashchat-light-color-panel-sound-text”>亲吻某人</span><span class=“topcmm-123flashchat-light-color-panel-sound-test-icon”>/lt;/span><span class=“topcmm-123flashchat-light-color-panel-sound-sent-icon”></span>/Div><Div class=“topcmm-123flas”hchat light color panel singe bar block“onmouseover=”this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block-over'“onmouseout=”this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block'“><span class=”topcmm-123flashchat-light-color-panel-sound-text“>尖叫<”/span><span class=“topcmm-123flashchat-light-color-panel-sound-test-icon”></span><span class=“topcmm-123flashchat-light-color-panel-sound-sent-icon”></span>/Div><Div class=“topcmm-123flashchat-light-color-panel-singe-bar-block”onMouseover=“this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block-over'“onmouseout=”this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block'“><span class=”topcmm-123flashchat-light-color-panel-sound-text“>睡眠时打哈欠</span><span class=”topcmm-123flashchat-light-color-panel-sound test icon“></span><span class=“topcmm-123flashchat-light-color-panel-sound-sent-icon”></span>/div><div class=“topcmm-123flashchat-light-color-panel-singe-bar-block”onmouseover=“this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block-over'”onmouseout=“this.classname='topcmm-123flashchat-light-color-panel-singe-bar-block'”><span class=“topcmm-123flashchat-light-color-panel-sound-text”>打鼾</span><span class=“topcmm-123flashchat-light-color-panel-sound-test-icon”></span><span class=“topcmm-123flashchat-lig”HT颜色面板声音发送图标“></span></DIV></DIV>