Question

我使用PHP和JavaScript创建了一个函数。它在大多数情况下都能很好地工作，但是当我将消息放入包含输入的帖子时，它无法正常工作。

这是导致问题的信息：

"Hello,

I will try to use enters in this post. That is because
I want it to be very readable and stuff, and people like
things that are readable.

Kind Regards,
Rachid"

这是我的PHP代码

<div class="guestbook-message" id="message_<?php echo $i;?>">
    <?php echo substr($guestBook[$i]['message'],0,140);
    if(strlen($guestBook[$i]['message']) > 140){ echo 
                        ".. <a class='read-more' 
                        onclick='expandMessage(
                        $i, \"{$guestBook[$i]['message']}\")'>ReadMore</a>";} ?>                
</div>

这是JavaScript：

function expandMessage(i, message) {
    document.getElementById('message_' + i).innerHTML = message +
    "<a onclick='shrinkMessage(" + i +",\"" + message + "\")' class='read-more'><br>Shrink Message</a>";
}
function shrinkMessage(i, message) {
    document.getElementById('message_' + i).innerHTML = message.substring(0, 140) +
    "..<a onclick='expandMessage(" + i +",\"" + message + "\")' class='read-more'> Read More</a>";
}

请不要使用jQuery帮我找到问题。

根据请求呈现HTML

<div class="post-header">Rachid | 2017-02-18 16:48:29 | Score: <img src="img/iconmonstr-thumbup.png"><img src="img/iconmonstr-thumbdown.png"></div>
    <div class="guestbook-message" id="message_18">
    Hello,

    I will try to use enters in this post. That is because
    I want it to be very readable and stuff, and people like
    things that are .. <a class='read-more' 
                        onclick='expandMessage(
                        18, "Hello,

    I will try to use enters in this post. That is because
    I want it to be very readable and stuff, and people like
    things that are readable.

    Kind Regards,
    Rachid")'>Read More</a> 
</div>

Answer 1

您可以使用json_encode功能

解决此问题

<?php

   // your code goes here

   $a = "Hi

        How are you ";

   echo json_encode($a); // "Hi\n\nHow are you "

Answer 2

您需要使用php函数nl2br

nl2br($guestBook[$i]['message'])

Function nl2br

Answer 3

您可以尝试交换BR（nl2br）的换行符或使用PRE和backtick：

function expandMessage(i, message) {
  document.getElementById('message_' + i).innerHTML = message + "<a onclick='shrinkMessage(" + i + ",`" + message + "`)' class='read-more'><br>Shrink Message</a>";
}

function shrinkMessage(i, message) {
  document.getElementById('message_' + i).innerHTML = message.substring(0, 140) +
    "..<a onclick='expandMessage(" + i + ",`" + message + "`)' class='read-more'> Read More</a>";
}

<div class="post-header">Rachid | 2017-02-18 16:48:29 | Score: <img src="img/iconmonstr-thumbup.png"><img src="img/iconmonstr-thumbdown.png"></div>
<div class="guestbook-message" id="message_18">
  Hello, I will try to use enters in this post. That is because I want it to be very readable and stuff, and people like things that are .. <a class='read-more' onclick='expandMessage(
                        18, `Hello,

    I will try to use enters in this post. That is because
    I want it to be very readable and stuff, and people like
    things that are readable.

    Kind Regards,
    Rachid`)'>Read More</a>
</div>

这是一种更好的方法，因为它在JavaScript中没有文本，IE不支持反引号（模板文字）

function toggleMessage(link) {
  link.previousSibling.classList.toggle("hide");
  link.textContent = link.textContent ==" Read More"?" Read Less":" Read More";
}

.hide { display: none}

<div class="post-header">Rachid | 2017-02-18 16:48:29 | Score: <img src="img/iconmonstr-thumbup.png"><img src="img/iconmonstr-thumbdown.png"></div>
<div class="guestbook-message" id="message_18">
  Hello, I will try to use enters in this post. That is because I want it to be very readable and stuff, and people like things that are <span class="hide">readable.

        Kind Regards,
        Rachid</span><a class='read-more' onclick="toggleMessage(this)"> Read More</a>
</div>

阅读某些字符串的更多按钮问题PHP＆amp; JavaScript的

3 个答案: