JavaScript处理段落链接后内容变单行，如何保留段落格式？

我用以下JavaScript代码处理带有链接的段落，通过添加HTML href元素将链接转为可点击状态。但运行代码后，段落内容变成了单行显示，我希望处理后的内容仍保持原有的段落格式，而非单行，请问有什么解决办法？

原代码 #

var collection = document.getElementsByClassName("Edit_desc");
for (let i=0; i<collection.length; i++) {
        //Regex Expresson to match general URL used frequently.
        var expression = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi;
        //Creating Regex Object with the Regex Expression
        var regex = new RegExp(expression);
        //Fetch words from the Text Area , array named 'input_text_words' will contain all words separately
        var input_text_words = collection[i].textContent.trim().split(/\s+/);
        var input_text_number_of_words = input_text_words.length;
        //Empty Paragraph Element
        var paragraphElement = "";
        //Traversing the words array
        for(var index = 0 ; index < input_text_number_of_words ; index++){
            //If the word matches the URL regex than print using <a href="url"> </a> so that link may appear.
            if(input_text_words[index].match(regex)){
                paragraphElement += '<a href="'+input_text_words[index]+'">'+input_text_words[index]+'</a>';
            }
            //Else if the word is not any url , simply print.
            else{
                paragraphElement += input_text_words[index];
            }

            if(index != input_text_number_of_words-1){
                paragraphElement += ' ';
            }
        }
        //Finally show the modified text in tha empty paragraph element.
       
        collection[i].innerHTML = paragraphElement;  
    }

问题原因 #

原代码用split(/\s+/)把文本按**所有空白字符（包括换行、多空格、制表符）**拆分，之后用单个空格拼接，直接丢失了原文本的换行结构，导致最终内容变成单行。

解决办法 #

直接对整个文本做正则替换，不用拆分单词，这样能完整保留原有换行和空格格式。用String.prototype.replace()全局匹配URL并替换为可点击的<a>标签：

修正后的代码 #

var collection = document.getElementsByClassName("Edit_desc");
for (let i = 0; i < collection.length; i++) {
    // 匹配通用URL的正则表达式
    var urlRegex = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/gi;
    // 直接处理原文本，保留所有格式
    var formattedText = collection[i].textContent.replace(urlRegex, function(match) {
        // 自动补全http/https前缀，避免无效链接（可选）
        const fullUrl = match.startsWith('http') ? match : `https://${match}`;
        return `<a href="${fullUrl}">${match}</a>`;
    });
    // 替换内容，保留原格式
    collection[i].innerHTML = formattedText;
    // 可选：添加CSS确保换行生效（若原元素未设置）
    collection[i].style.whiteSpace = 'pre-line';
}

说明 #

1. 格式保留：直接替换整个文本，不会破坏原有的换行、多空格结构。
2. 链接补全：自动给非http开头的URL添加https前缀，避免出现无效的相对路径链接。
3. 换行生效：设置white-space: pre-line后，文本中的换行符\n会在HTML中显示为换行，同时自动合并连续空格。

内容的提问来源于stack exchange，提问作者Omar