replace file inside html tags using bash

Question

I have an HTML file where I need to replace text inside the paragraph element (<p>) with the capital letters of the same like <p>hi</p> to <p>HI</p>.

x=`cat $1 | grep -o '<p>.*</p>' | tr '[:lower:]' '[:upper:]'`
var2=`echo $x`
headerremove=`grep -o '<p>.*</p>' $1`
var3=`echo $headerremove`
echo $var2
echo $var3
sed 's/$var3/$var2/g' "$1"

Input
<h1>head</h1>
<p>hello</p>

Output
<p>HELLO</p>

This is not working as expected. Also I need to remove all other details like all tags and their child elements other than the paragraph element.

Answer 1

$ cat f.html
<h1>head</h1>
<p>hello</p>
<p>world</p>
$ grep -o '<p>.*</p>' f.html | tr '[:lower:]' '[:upper:]' | sed 's/P>/p>/g'  
<p>HELLO</p>
<p>WORLD</p>


# capture other tags: grep multi-pattern e.g 'patt1\|patt2\|pattN'
$ grep -o '<p>.*</p>\|<h1>.*</h1>' f.html | tr '[:lower:]' '[:upper:]' | sed 's/P>/p>/g;s/H1>/h1>/g'
<h1>HEAD</h1>
<p>HELLO</p>
<p>WORLD</p>

# add line after h1 tag : grep+tr+sed
function foo () {
    grep -o '<p>.*</p>\|<h1>.*</h1>' "${1}" | tr '[:lower:]' '[:upper:]' | sed 's/P>/p>/g;s/H1>/h1>/g' | while read line; do 
        case "${line}" in
            "<h1>"*)
                echo "${line}"
                echo "anything that should appear after h1 tags"
            ;;
            "<p>"*)
                echo "${line}"
            ;;
        esac
    done
}

$ foo f.html
<h1>HEAD</h1>
anything that should appear after h1 tags
<p>HELLO</p>
<p>WORLD</p>

# add line after h1 tag : few [shell parameter expansion] tips + while & case statments 
function foo () {
    grep -o '<p>.*</p>\|<h1>.*</h1>' "${1}" | while read line; do 
        case "${line}" in
            "<h1>"*)
                line="${line^^}"; #capitalize (shell parameter expansion)
                echo "${line//H1>/h1>}" # find replace (shell parameter expansion)
                echo "anything that should appear after h1 tags"
            ;;
            "<p>"* | "<P>"*) # if html files contain capitalized P tag and you wanna capture them 
                line="${line^^}"; #capitalize
                echo "${line//P>/p>}" # find replace
            ;;
            "<foo>"*)
                line="${line^^}"; #capitalize 
                linopenintag="${line//<foo>/}"; # <foo>hello world</foo> ==> hello world</foo>
                innerHTML="${linopenintag//<\/foo>/}"; # hello world</foo> ==> hello world
                innerHTMLarr=(${innerHTML});  # in case i want to put each word in a spin or/and style that word differently 

                for eachword in ${innerHTMLarr[@]}; do
                    if [[ "${eachword}" == "something" ]]; then # capture special words ... 
                        echo "<bar style='...'> ${eachword} </bar>"
                    else
                        echo "<bar> ${eachword} </bar>"
                    fi
                done

            ;;
        esac
    done
}
$ foo f.html 
<h1>HEAD</h1>
anything that should appear after h1 tags
<p>HELLO</p>
<p>WORLD</p>

Answer 2

xmllint + sed solution:

xmllint --html --xpath "//p" input.html | sed 's/>[^<>]*</\U&/'

The output:

<p>HELLO</p>