How to get the string concerned with html helping

Questions / Help
,
1

Hello, I want to count 3 </p> html tag form my string and take them like this, it should be noted I need all of these sting and html tags:

my site contents:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <!--  1 -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <!--  2 -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <!-- 3 -->
<!-- I need the three items above  -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>

how do I do cut that? I need those for creating read more in my site.

I have seen String.slice(0..29) , but it hasn’t work for me.

thanks

2

:wave:

To avoid cutting <p> tags half-way through, parse the html (if it hasn’t been parsed already) with something like floki, take three <p> nodes from it and then possibly render it back into a string.

2 Likes
3

I just want to cut 3 lines of that with their html tags !!, I have read floki document, but I haven’t known what to do. because it hasn’t slice or filter function which I need.

would you mind seeing me a example?

4

Once You have Floki…

iex(1)> html = "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <!--  1 -->
...(1)> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <!--  2 -->
...(1)> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> <!-- 3 -->
...(1)> <!-- I need the three items above  -->
...(1)> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>"
iex(2)> output = Floki.find(html, "p")         
[
  {"p", [], ["Lorem ipsum dolor sit amet, consectetuer adipiscing elit"]},
  {"p", [], ["Lorem ipsum dolor sit amet, consectetuer adipiscing elit"]},
  {"p", [], ["Lorem ipsum dolor sit amet, consectetuer adipiscing elit"]},
  {"p", [], ["Lorem ipsum dolor sit amet, consectetuer adipiscing elit"]}
]

and then, it’s just a list

iex(3)> output |> Enum.take(3)
[
  {"p", [], ["Lorem ipsum dolor sit amet, consectetuer adipiscing elit"]},
  {"p", [], ["Lorem ipsum dolor sit amet, consectetuer adipiscing elit"]},
  {"p", [], ["Lorem ipsum dolor sit amet, consectetuer adipiscing elit"]}
]

PS: To transform data back to html, You might use a final pipe like this

|> Floki.raw_html
5 Likes
5

may you help me? I have this:

[
  {"p", [{"style", "text-align: right;"}],
   [
     {"span", [{"style", "font-size: 18pt;"}],
      [
        {"strong", [],
         [
           "لورم ",
           {"a", [{"href", "http://localhost:9991/blog"}], ["ایپسوم"]},
           " متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد."
         ]}
      ]}
   ]}
]

I want it to see each span and delete span style attribute

html |> Floki.find("span") |> Floki.attribute("style")

I searched this but I couldn’t find the way which removed span style in dynamic html

outputs which I need:

[
  {"p", [{"style", "text-align: right;"}],
   [
     {"span", [],
      [
        {"strong", [],
         [
           "لورم ",
           {"a", [{"href", "http://localhost:9991/blog"}], ["ایپسوم"]},
           " متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد."
         ]}
      ]}
   ]}
]
6

I fixed this:

def remove_style_before_readmore(html) do

    the_html = html
    |> Floki.find("span")
    |> Floki.attribute("style")
    |> Enum.join

    String.replace(html, "style=\"" <> the_html <> "\"", "")
  end
7

Glad You could solve this.

I would like to mention, as a personal opinion, that I don’t find practical to mix styles with elements. For this, I would prefer to use CSS. You don’t even need to style each element, I would use a wrapper class (eg: long, short).

.long p { whatever style here }
.long span {}
.short p {}
.short span {}

etc.

Thus You would not need to change styles at all, it would depend on higher CSS context.

Of course that does not apply if You are not allowed to change layout.

PS: If You use SASS, it is easy to define hierarchy in your styles.

1 Like